<template>
  <div>
    <!-- 选择下拉框组件-->
    <div class="selectBox">
      <div class="titleBox">
        <slot name="titleName"></slot>
        <!-- 组件使用方法 -->
        <!-- <span slot="titleName">仪器类型:</span> -->
      </div>
      <div class="inputBox">
        <slot name="selectBox"></slot>
        <!-- 组件试用方法 -->
        <!-- <el-select
          slot="selectBox"
          v-model="value"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang='scss' scoped>
.selectBox {
  width: 100%;
  height: 100%;
  display: flex;
  // flex-direction: row;
  // align-items: center;
  // padding: 0 3.8rem;
  // box-sizing: border-box;
  .titleBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2.2rem;
    padding-right: 2rem;
    text-align: right;
  }
  .inputBox {
    flex: 1.8;
    display: flex;
    align-items: center;
    .el-select {
      width: 100%;
      height: 4.8rem;
      border-radius: 0.8rem;
      outline: none;
      background-color: #0f0f1f;
      color: #eeeeee;
      font-size: 1.8rem;
      /deep/.el-input--small {
        .el-input__inner {
          height: 4.8rem;
          width: 100%;
          background-color: #0f0f1f;
          border: 0.1rem solid #888888;
          font-size: 1.8rem;
        }
      }
    }
  }
}
</style>
<style>
.el-select-dropdown {
  background: #0f0f1f;
  height: auto;
}
.el-select-dropdown__item {
  font-size: 1.4rem;
}
.el-select-dropdown__item.selected {
  color: #00ff99;
}
.el-select-dropdown__item {
  margin-top: 0.8rem;
}
</style>